<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="example">
            <my-component></my-component>
            <child message="WTF"></child>
        </div>

        <div>
            zxcv
            <my-component></my-component>
        </div>


        <script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
        <script type="text/javascript">
            // 注册

            Vue.component('child', {
                // 声明 props
                props: ['message'],
                // 就像 data 一样，prop 可以用在模板内
                // 同样也可以在 vm 实例中像“this.message”这样使用
                template: '<span>{{ message }}</span>'
            });

            Vue.component('my-component', {
                template: '<div>A custom component111111111111!</div>'
            });

            var Child = {
                template: '<div>A custom componentxxx!</div>'
            }

            var vm = new Vue({
                el: "#example",
                data: {},
                methods: {},
                components: {
                    // <my-component> 将只在父模板可用
                    'my-component': Child
                }
            });
        </script>
    </body>
</html>